/**************userInfoPart***************/
.wrapper .main .userInfoPart{
    width: 100%;
    height: 230vw;
    margin-bottom: -12vw;
    background-color: #202126;
    color: #dfe3e6;
    user-select: none;
}

/**************top***************/
.wrapper .main .userInfoPart .userInfo-top-container{
    width: 100%;
    height: 30vw;
}
.wrapper .main .userInfoPart .userInfo-top-container .userInfo-top-fix{
    width: 100%;
    height: 30vw;
}
.wrapper .main .userInfoPart .userInfo-top-container .userInfo-top-fix .userInfo-top{
    width: 100%;
    height: 30vw;
    background: linear-gradient(to bottom, #515151, #393a3e);

    display: flex;
    align-items: center;
}
.wrapper .main .userInfoPart .userInfo-top-container .userInfo-top-fix .userInfo-top .i{
    font-size: 9vw;
    margin-left: 3vw;
    cursor: pointer;
}
.wrapper .main .userInfoPart .userInfo-top-container .userInfo-top-fix .userInfo-top img{
    height: 20vw;
    margin-left: 1vw;
}
.wrapper .main .userInfoPart .userInfo-top-container .userInfo-top-fix .userInfo-top .userInfo-top-right{
    margin-left: 5vw;
}
.wrapper .main .userInfoPart .userInfo-top-container .userInfo-top-fix .userInfo-top .userInfo-top-right p{
    font-size: 5vw;
    font-weight: bolder;

    display: flex;
    align-items: center;
}
.wrapper .main .userInfoPart .userInfo-top-container .userInfo-top-fix .userInfo-top .userInfo-top-right div{
    width: 36vw;
    height: 10vw;
    background-color: #4d4d4f;
    border-radius: 5px;
    font-size: 4vw;
    font-weight: bolder;
    margin-top: 2vw;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

/**************userInfo***************/
.wrapper .main .userInfoPart .userInfo{
    margin-top: 4vw;
    width: 100%;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.wrapper .main .userInfoPart .userInfo div{
    width: 28%;
    height: 16vw;
    background-color: #292c33;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}
.wrapper .main .userInfoPart .userInfo div p:first-child{
    margin-top: 2.5vw;
    font-weight: bold;
}
.wrapper .main .userInfoPart .userInfo div p:last-child{
    color: #5c6167;
}

/**************add-friend***************/
.wrapper .main .userInfoPart .add-friend{
    width: 92%;
    height: 12vw;
    margin-left: 4%;
    margin-top: 4vw;
    background-color: #4795f7;
    border-radius: 5px;
    font-size: 4.5vw;
    font-weight: bolder;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .main .userInfoPart .add-friend .i{
    margin-right: 3vw;
    margin-top: 0.5vw;
}

/**************my-content***************/
.wrapper .main .userInfoPart .my-content{
    width: 100%;
    background-color: #292c33;
    margin-top: 5vw;
}
.wrapper .main .userInfoPart .my-content p{
    height: 8vw;
    color: #5c6167;
    padding-left: 5vw;
    padding-top: 3vw;
    box-sizing: border-box;
}
.wrapper .main .userInfoPart .my-content li{
    height: 14vw;
    padding-left: 5vw;
    box-sizing: border-box;
    border-bottom: solid 0.1vw #505051;
    font-size: 5vw;
    font-weight: bolder;
    cursor: pointer;

    display: flex;
    align-items: center;
}

/**************option***************/
.wrapper .main .userInfoPart .option{
    height: 20vw;
    cursor: pointer;

    border-bottom: solid 0.1vw #505051;
    box-sizing: border-box;
    padding: 0 2vw 0 5vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .main .userInfoPart .option div p:first-child{
    font-size: 5vw;
    font-weight: bolder;
}
.wrapper .main .userInfoPart .option div p:last-child{
    color: #5c6167;
}
.wrapper .main .userInfoPart .option .i{
    font-size: 7vw;
}

/*******弹出菜单*******/
.wrapper .main .userInfoPart .popmenu1{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /*透明度*/
    display: none;
    z-index: 1000;
}
.wrapper .main .userInfoPart .popmenu1 .popup {
    background-color: #292c33;
    width: 100%;
    height: 45vw;
    position: fixed;
    bottom: 0;
    left: 0;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.wrapper .main .userInfoPart .popmenu1 .popup .tdesign\:chevron-down-double-s{
    height: 10vw;
    font-size: 6vw;
    color: #606166;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3vw;
}
.wrapper .main .userInfoPart .popmenu1 .popup_btn button{
    width: 100%;
    height: 17vw;
    cursor: pointer;

    border: none;
    border-top: solid 1px #3d434f;
    outline: none;
    background-color: #292c33;
    color: #dfe3e6;

    display: flex;
    align-items: center;
}
.wrapper .main .userInfoPart .popmenu1 .popup_btn img{
    height: 9vw;
    margin-left: 2vw;
}
.wrapper .main .userInfoPart .popmenu1 .popup_btn .cur-account .info{
    width: 70%;
}
.wrapper .main .userInfoPart .popmenu1 .popup_btn .cur-account .info p:first-child{
    font-size: 4vw;
    font-weight: bolder;
    margin-left: -80%;
}
.wrapper .main .userInfoPart .popmenu1 .popup_btn .cur-account .info p:last-child{
    font-size: 3.5vw;
    margin-left: -78%;
    margin-top: 1vw;
    color: #4b9cf7;
}
.wrapper .main .userInfoPart .popmenu1 .popup_btn .add-account div{
    font-size: 7vw;
    margin-left: 3vw;
}
.wrapper .main .userInfoPart .popmenu1 .popup_btn .add-account span{
    font-size: 3.5vw;
    margin-left: 2vw;
}
/******************/